<template>
    <div class="Login">

        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <h2>登录</h2>
            <a-form-item label="学号/工号" name="username"
                :rules="[{ required: true, message: 'Please input your Cid,Gid!' }]">
                <a-input v-model:value="formState.username" autocomplete />
            </a-form-item>
            <a-form-item label="密码" name="password"
                :rules="[{ required: true, message: 'Please input your password!' }]">
                <a-input-password v-model:value="formState.password" autocomplete />
            </a-form-item>
            <a-form-item label="身份" name="type" :rules="[{ required: true, message: 'Please input your type!' }]">
                <a-radio-group v-model:value="formState.type">
                    <a-radio value="student">学生</a-radio>
                    <a-radio value="worker">维修工</a-radio>
                    <a-radio value="admin">管理员</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" html-type="submit">Submit</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script setup>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
const formState = reactive({
    username: '',
    password: '',
    remember: true,
    type: ''
});
// eslint-disable-next-line no-unused-vars
const onFinish = values => {
    // console.log('Success:', values);
    ElMessage({
        message: '登录成功即将跳转',
        type: 'success',
    })
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};

</script>
<style scoped>
.Login {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/img/forest-3622519_1280.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.ant-form {
    background-color: rgba(255, 255, 255, .5);

    width: 600px;
    padding: 25px 70px;
    border: 1px solid black;
    border-radius: 16px;
}

.ant-form h2 {
    font-weight: 700;
    text-align: center;
    font-size: 1.5rem;
}
</style>